<template>
  <div class="dashboard-container">
    <!-- 添加动态背景 -->
    <div class="animated-background">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    
    <!-- Header section with logistics info and province data -->
    <div class="header">
      <LogisticsTicker class="ticker-section" />
      <ProvinceDataChart class="chart-section" />
    </div>
    
    <!-- Main map section -->
    <div class="map-section">
      <ChinaMap />
    </div>
    
    <!-- Footer section -->
    <div class="footer">
      <StatisticsPanel />
    </div>
    
    <!-- AI Assistant Character -->
    <div 
      class="ai-assistant" 
      :style="assistantStyle"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <div class="character" :class="{ waving: isWaving }">
        <div class="character-body"></div>
        <div class="character-head"></div>
        <div class="character-eye left-eye"></div>
        <div class="character-eye right-eye"></div>
        <div class="character-mouth"></div>
        <div class="character-arm left-arm"></div>
        <div class="character-arm right-arm"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChinaMap from './ChinaMap.vue';
import LogisticsTicker from './LogisticsTicker.vue';
import ProvinceDataChart from './ProvinceDataChart.vue';
import StatisticsPanel from './StatisticsPanel.vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const mouseX = ref(0);
const mouseY = ref(0);
const isWaving = ref(false);

const assistantStyle = ref({
  transform: 'translate(0px, 0px)'
});

const handleMouseMove = (e: MouseEvent) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
  
  // Calculate position relative to viewport size
  const xPos = (e.clientX / window.innerWidth - 0.5) * 20;
  const yPos = (e.clientY / window.innerHeight - 0.5) * 20;
  
  assistantStyle.value.transform = `translate(${xPos}px, ${yPos}px)`;
};

const handleMouseEnter = () => {
  isWaving.value = true;
};

const handleMouseLeave = () => {
  isWaving.value = false;
};

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove);
});

onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleMouseMove);
});
</script>

<style scoped>
.dashboard-container {
  background: transparent;
  color: #e2e8f0;
  min-height: 100vh;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 添加动态背景动画 */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 修改z-index确保在最底层 */
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 150px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.3), rgba(236, 72, 153, 0.3));
  border-radius: 45% 47% 44% 42%;
  animation: wave 15s linear infinite;
  filter: blur(10px);
}

.wave:nth-child(2) {
  animation: wave 20s linear infinite;
  opacity: 0.7;
  bottom: 10px;
  animation-direction: reverse;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.4), rgba(59, 130, 246, 0.3), rgba(245, 158, 11, 0.3));
  filter: blur(15px);
}

.wave:nth-child(3) {
  animation: wave 25s linear infinite;
  opacity: 0.5;
  bottom: 20px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.4), rgba(236, 72, 153, 0.3), rgba(16, 185, 129, 0.3));
  filter: blur(20px);
}

@keyframes wave {
  0% {
    transform: rotate(0deg) translateX(-5%) translateY(0px);
    background-position: 0% 50%;
  }
  50% {
    transform: rotate(180deg) translateX(5%) translateY(20px);
    background-position: 100% 50%;
  }
  100% {
    transform: rotate(360deg) translateX(-5%) translateY(0px);
    background-position: 0% 50%;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 400px; /* Ensure minimum height */
  height: 30vh; /* 添加固定高度确保与右侧卡片保持一致高度 */
}

.ticker-section {
  flex: 1;
  height: 100%; /* 确保填满容器高度 */
}

.chart-section {
  flex: 1;
  height: 100%; /* 确保填满容器高度 */
}

.map-section {
  height: 60vh;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}

.footer {
  height: 20vh;
  position: relative;
  z-index: 1;
}

/* AI Assistant Styles */
.ai-assistant {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  transition: transform 0.1s ease-out;
}

.character {
  position: relative;
  width: 80px;
  height: 100px;
}

.character-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: #ffd7d7;
  border-radius: 50%;
  z-index: 2;
}

/* Add hair behind the head */
.character-hair {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: #ff9ec9;
  border-radius: 50% 50% 0 0;
  z-index: 1;
}

.character-hair:before {
  content: '';
  position: absolute;
  top: 30px;
  left: -5px;
  width: 20px;
  height: 30px;
  background: #ff9ec9;
  border-radius: 50%;
  transform: rotate(-20deg);
}

.character-hair:after {
  content: '';
  position: absolute;
  top: 30px;
  right: -5px;
  width: 20px;
  height: 30px;
  background: #ff9ec9;
  border-radius: 50%;
  transform: rotate(20deg);
}

.character-body {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: #60a5fa;
  border-radius: 40% 40% 20% 20%;
  z-index: 1;
}

.character-eye {
  position: absolute;
  top: 20px;
  width: 8px;
  height: 8px;
  background: #1e293b;
  border-radius: 50%;
  z-index: 3;
}

.left-eye {
  left: 15px;
}

.right-eye {
  right: 15px;
}

.character-mouth {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 8px;
  background: transparent;
  border: 2px solid #1e293b;
  border-top: none;
  border-radius: 0 0 50% 50%;
  z-index: 3;
}

.character-arm {
  position: absolute;
  top: 45px;
  width: 8px;
  height: 30px;
  background: #ffd7d7;
  border-radius: 4px;
  z-index: 0;
  transform-origin: top center;
}

.left-arm {
  left: 15px;
  transform: rotate(20deg);
}

.right-arm {
  right: 15px;
  transform: rotate(-20deg);
}

.character.waving .right-arm {
  animation: waveArm 0.5s ease-in-out infinite alternate;
}

@keyframes waveArm {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
</style>